<template>
  <div class="comment-content">
    <div class="boxjiushi">
      <textarea class="commentipt" v-model="inputText" placeholder="有什么想说的吗？评论给小伙伴们看吧！"></textarea>
    </div>
    <div class="boxjiushi">
      <div>
        <img
          :src="img"
          alt
          class="showimg"
        >
      </div>
      <div class="upimgbox">
        <img src="@/assets/img/img_fbpl_pzsc.png" class="upimg" @click="Suk_upimg">
        <span class="uptit">拍照上传</span>
      </div>
      <!-- <div class="upimgbox">
        <img src="@/assets/img/img_fbpl_zpsc.png" class="upimg">
        <span class="uptit">照片上传</span>
      </div>-->
    </div>
    <!-- <input @change="handleFileChange" ref="inputer" type="file" style="display: block;height: 40px;width: 100%;cursor:pointer" /> -->
    <!-- <img :src="img">
    <van-uploader :after-read="onRead" accept="image/gif, image/jpeg, image/png" multiple>
         <van-icon name="photograph" />
    </van-uploader>-->
    <div class="commentstar boxjiushi">
      <div class="nonamebox" v-if="noname == 1" @click="check">
        <img src="@/assets/img/icon_fbpl_g.png" class="nonameimg">
      </div>
      <div class="nonamebox" v-if="noname == 0" @click="check">
        <img src="@/assets/img/icon_fbpl_g_N.png" class="nonameimg">
      </div>
      <span>匿名</span>
    </div>
    <div class="starbox boxjiushi">
      <div class="starsbox">
        <span>评价店铺</span>
        <van-rate
          v-model="storevalue"
          color="#ff2f4e"
          @change="storechange"
          style="display: inline;vertical-align:middle"
        />
      </div>
      <!--<div class="starsbox">
        <span>评价骑手</span>
        <van-rate
          v-model="ridervalue"
          color="#ff2f4e"
          @change="riderchange"
          style="display: inline;vertical-align:middle"
        />
      </div>-->
    </div>
    <div class="commentbtn" @click="Suk_tocomment">发布评价</div>
  </div>
</template>

<script>
//0不匿名 1匿名
export default {
  data() {
    return {
      upimglist: [], //这是我们的上传图片的数组
      storevalue: 0,
      ridervalue: 0,
      img: "",
      comment: "",
      inputText: "",
      noname: 0,
      type: 0,
      data: null
    };
  },
  beforeCreate: function() {
    //创建前
  },
  created: function() {
    console.log(this.$route.params.orderid);
    //创建后
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    Suk_upimg() {
      // this.showzimg = 1
      // this.zimg = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547882174477&di=31b5bba04f4da5d3f4126ff93f4e85e7&imgtype=0&src=http%3A%2F%2Fthumb210.jfcdns.com%2Fn131929c23812%2F16f5c01f7c1049c3.jpeg"
      let that = this;
      dsBridge.call("uploadImg", 1);
      dsBridge.register("addImgCallback", function(data) {
        // alert(1);
        that.img = data
        // let str = JSON.parse(data)
        // that.$toast.loading({
        //   message: "加载中..."
        // });
        // alert("12132")
        console.log(Sukdata);
      });
    },
    check() {
      let that = this;
      that.noname = !that.noname;
      that.type;
    },
    storechange(e) {
      console.log(e);
    },
    riderchange(e) {
      console.log(e);
    },
    Suk_tocomment() {
      let that = this;
      var Sukdata = {
        concent: that.inputText, //评论内容
        ridingClass: that.ridervalue, //骑手评分
        dinClass: that.storevalue, //商家评分
        user_id: localStorage.getItem("userid"), //用户id
        // dinId: localStorage.getItem("storeid"), //店铺id
        order_id: that.$route.params.orderid, // 这是我们的订单id
        dinId: that.$route.params.shopid,
        img: that.img
        // type:
      };
      console.log(Sukdata, "here");
      that.axios
        .post(
          that.baseUrl + "/evaluate/insertEvalua",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            console.log(res.data);
            if (res.data.meta.code == 1) {
              if (res.data.meta.msg == "评论成功") {
                that.$toast.success({
                  message: "评论成功"
                })
                setTimeout(function () {
                  that.$router.go(-1);
                }, 3000);

              }
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    }
    // handleFileChange() {
    //     let inputDOM = this.$refs.inputer;
    //     // 通过DOM取文件数据
    //     this.file = inputDOM.files[0];
    //     if (this.file && this.beforeAvatarUpload(this.file)) {
    //       this.submitUpload(this.file);
    //     }
    //   },
    //   beforeAvatarUpload(file) {
    //     const isJPG = file.type === "image/jpeg";
    //     const isPng = file.type === "image/png";
    //     const isLt2M = file.size / 1024 / 1024 < 2;
    //     if (!isPng && !isJPG) {
    //       Message.error("上传头像图片只能是 PNG 或 JPG 格式!");
    //     }
    //     if (!isLt2M) {
    //       Message.error("上传头像图片大小不能超过 2MB!");
    //     }
    //     return (isJPG || isPng) && isLt2M;
    //   },
    //   submitUpload(file) {
    //     let that = this;

    //   },
    //   onRead(file) {
    //     console.log(file)
    //   }
  }
};
</script>
<style lang="scss" scoped>
.boxjiushi {
  width: 90%;
  margin: 0 auto;
  height: 30%;
}
.comment-content {
  font-size: 0.3rem;
}
.commentipt {
  margin-top: 1%;
  display: inline-block;
  width: 100%;
  height: 100px;
  font-size: 15px;
  color: #8a8a8a;
  border: none;
}

.upimgbox {
  position: relative;
  width: 28%;
  height: 28%;
  display: inline-block;
}

.upimg {
  width: 100%;
  height: 100%;
}

.uptit {
  position: absolute;
  bottom: 15%;
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #8a8a8a;
}

.nonamebox {
  position: absolute;
  width: 6%;
  img {
    width: 100%;
    vertical-align: middle;
  }
}

.starsbox {
  margin-top: 5%;
}

.commentstar {
  margin-top: 5%;
}

.commentstar {
  span {
    display: inline-block;
    margin-left: 10%;
    vertical-align: middle;
  }
}

.commentbtn {
  background: #ff2f4e;
  width: 90%;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-size: 15px;
  border-radius: 5px;
  margin-top: 5%;
}

.showimg {
  width: 2.5rem;
  height: 2rem;
  margin-bottom: 0.3rem;
  margin-right: 0.3rem;
}
</style>
